<template>
  <div>
    <el-card>
      <div slot="header">
        增加商品
      </div>
      <div style="max-width:800px">
        <el-form ref="itemAdd" :rules="rules" :model="item" label-width="80px">
          <el-form-item label="商品名字" prop="name">
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input-number :min="0" v-model="item.price"></el-input-number>
          </el-form-item>
          <el-form-item label="商品分类" prop="cateId">
            <el-select v-model="item.cateId" placeholder="请选择商品分类">
              <el-option label="顶层分类" :value="0"></el-option>
              <el-option
                v-for="cate in cates"
                :key="cate.id"
                :label="cate.cateName"
                :value="cate.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上下架" prop="onSale">
            <el-switch v-model="item.onSale"></el-switch>
          </el-form-item>
          <el-form-item label="商品封面">
            <el-upload
              ref="upload"
              class="upload-demo"
              action="/api/upload"
              name="file"
              accept=".png, .jpg, .jpeg"
              :headers="{token: 'dwfegr6'}"
              :auto-upload="false"
              :data="{a: 10,b: 20}"
              :before-upload="beforeUpload"
              :on-success="uploadSucess"
              >
              <el-button size="small" type="primary">点击选择</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-button @click="uploadFile" size="small" type="success">点击上传</el-button>
          </el-form-item>
          <el-form-item label="商品描述" prop="desc">
            <el-input type="textarea" v-model="item.desc"></el-input>
          </el-form-item>
           <el-form-item label="商品详情" prop="content">
             {{ item.content }}
             <div class="content-container">
               <quill-editor
                  v-model="item.content"
                  ref="myQuillEditor"
                  :options="editorOption"
              >
              </quill-editor>
             </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { fetchCateLists, addItem } from '_api'
import { Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
// 注册模块
Quill.register('modules/ImageExtend', ImageExtend)
export default {
  name: 'ItemAdd',
  data () {
    return {
      item: {
        name: '',
        price: 0,
        cateId: 0,
        onSale: true,
        thumb: '',
        desc: '',
        content: '' // 商品详情
      },
      rules: {
        name: [
          {
            required: true,
            message: '商品名称必填'
          }
        ],
        price: [
          {
            required: true,
            message: '商品价格必填'
          }
        ],
        cateId: [
          {
            required: true,
            message: '请选择商品分类'
          }
        ]
      },
      cates: [], // 所有分类
      editorOption: {
        scrollingContainer: '.content-container',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'upload',
            action: '/api/upload',
            response: (res) => {
              // return 接口返回的图片地址 否则 上传图片 无法在富文本中回显
              return res.data.url
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      }
    }
  },
  methods: {
    onSubmit () {
      // 提交表单新增商品
      this.$refs.itemAdd.validate(valid => {
        if (valid) {
          // 提交表单
          addItem(this.item).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: res.data.msg,
                onClose: () => {
                  this.$router.replace('/itemLists')
                }
              })
            }
          })
        } else {
          return false
        }
      })
    },
    fetchCates () {
      // 请求所有分类
      fetchCateLists().then(res => {
        if (res.data.code === 200) {
          this.cates = res.data.data.list
        }
      })
    },
    beforeUpload (file) {
      if (file.size > (500 * 1024)) {
        alert('上传文件体积不能超出500kb')
        return false
      } else {
        return true
      }
    },
    uploadFile () {
      this.$refs.upload.submit()
    },
    uploadSucess (res) {
      // 上传成功回调
      if (res.code === 200) {
        this.item.thumb = res.data.url
        this.$message({
          type: 'success',
          message: '上传成功'
        })
      }
    }
  },
  created () {
    this.fetchCates()
  }
}
</script>

<style lang="scss" scoped>
.content-container{
  height: 500px;
  overflow: auto;
}
.quill-editor{
  height: 500px;
}
</style>
